<template>
	<view class="log-container">
		<view class="header">
			<view class="device-info">
				<text class="device-name">{{deviceName}}</text>
				<text class="device-id">设备ID: {{deviceId}}</text>
			</view>
			<view class="filter-section">
				<view class="date-range">
					<uni-icons type="calendar" size="16" color="#666"></uni-icons>
					<text>时间范围</text>
				</view>
				<view class="filter-options">
					<view 
						v-for="(option, index) in filterOptions" 
						:key="index"
						class="filter-item"
						:class="{ active: currentFilter === option.value }"
						@click="changeFilter(option.value)"
					>
						{{option.label}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="log-list">
			<view class="log-item" v-for="(log, index) in logs" :key="index">
				<view class="log-time">{{log.time}}</view>
				<view class="log-content">
					<view class="log-type" :class="log.type">{{log.typeText}}</view>
					<view class="log-detail">{{log.content}}</view>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="logs.length === 0">
			<uni-icons type="info" size="32" color="#999"></uni-icons>
			<text>暂无日志记录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			deviceId: '',
			deviceName: '',
			currentFilter: 'all',
			filterOptions: [
				{ label: '全部', value: 'all' },
				{ label: '状态变更', value: 'status' },
				{ label: '操作记录', value: 'operation' },
				{ label: '异常信息', value: 'error' }
			],
			allLogs: [
				{
					time: '2024-03-20 14:30:00',
					type: 'status',
					typeText: '状态变更',
					content: '设备上线'
				},
				{
					time: '2024-03-20 14:25:00',
					type: 'operation',
					typeText: '操作记录',
					content: '用户调整温度至26℃'
				},
				{
					time: '2024-03-20 14:20:00',
					type: 'error',
					typeText: '异常信息',
					content: '连接超时，自动重连成功'
				}
			],
			logs: []
		}
	},
	computed: {
		filteredLogs() {
			if (this.currentFilter === 'all') {
				return this.allLogs;
			}
			return this.allLogs.filter(log => log.type === this.currentFilter);
		}
	},
	onLoad(options) {
		// 获取页面参数
		this.deviceId = options.id;
		this.deviceName = decodeURIComponent(options.name);
		
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: '设备日志'
		});
		
		// 初始化日志数据
		this.logs = this.filteredLogs;
	},
	methods: {
		changeFilter(filter) {
			this.currentFilter = filter;
			this.logs = this.filteredLogs;
		}
	}
}
</script>

<style lang="scss">
.log-container {
	padding: 20rpx;
	background: #f5f5f5;
	min-height: 100vh;
	
	.header {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.device-info {
			margin-bottom: 20rpx;
			
			.device-name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
				display: block;
			}
			
			.device-id {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.filter-section {
			.date-range {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #666;
				margin-bottom: 16rpx;
				
				text {
					margin-left: 8rpx;
				}
			}
			
			.filter-options {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				
				.filter-item {
					padding: 8rpx 24rpx;
					background: #f5f5f5;
					border-radius: 24rpx;
					font-size: 24rpx;
					color: #666;
					
					&.active {
						background: #007AFF;
						color: #fff;
					}
				}
			}
		}
	}
	
	.log-list {
		.log-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;
			
			.log-time {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;
			}
			
			.log-content {
				.log-type {
					display: inline-block;
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 24rpx;
					margin-bottom: 8rpx;
					
					&.status {
						background: rgba(0,122,255,0.1);
						color: #007AFF;
					}
					
					&.operation {
						background: rgba(7,193,96,0.1);
						color: #07c160;
					}
					
					&.error {
						background: rgba(255,77,79,0.1);
						color: #ff4d4f;
					}
				}
				
				.log-detail {
					font-size: 28rpx;
					color: #333;
					line-height: 1.5;
				}
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		
		text {
			font-size: 28rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}
}
</style> 